<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>78_setup上下文对象</title>
</head>

<body>
    <div id="app">
        <input type="button" value="修改作者" @click="changeAuthor">
        <book name="三国演义" :author="author" ></book>
    </div>
</body>
<script src="./js/vue.global.js"></script>
<script>

    const { createApp, ref,computed,toRefs } = Vue

    let book = {
        props:["name","author"],
        template:`
            <h1>书籍组件：{{title}}</h1>
            <div>
                <p>书名：{{name}}</p>
                <p>作者：{{author}}</p>
            </div>
        `,
        setup(props){
            // setup函数的第一个参数就能够拿到组件声明的属性。
            // console.log("props",props);       
            // console.log("props.name",props.name);

            // 1、props本身是响应式的，所以不要解构它，就用 props.属性名  的写法使用
            // let title = computed(()=>props.author+"的书");


            // 2、如果解构了，就失去了响应式。
            // 如果解构了还想让它保存响应式，那么就用工具函数toRefs。
            let {name,author} = toRefs(props); 
            let title = computed(()=>author.value+"的书");

            return {
                title
            }

        }
    }


    const app = createApp({
        components:{book},
        setup(){  

          let author = ref("罗贯中");

          function changeAuthor(){
            author.value +="1";
          }

          return {
            author,
            changeAuthor
          }
        },
    })
    


    app.mount('#app')
</script>

</html>